<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #f6f6f6;
				min-height: 100vh;
				font-size: 0.373rem;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			body input[type='text'],
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			.clear {
				clear: both;
				height: 0;
				font-size: 0;
				line-height: 0;
				visibility: hidden;
				overflow: hidden;
			}
			/*顶部*/
			
			.my_top {
				height: 4.57rem;
				background: url(../images/my_bg.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.my_topz {
				padding: 1.16rem 0.493rem 0;
				display: flex;
			}
			
			.my_top_tx {
				background: url(../images/my_txbg.png) no-repeat;
				background-size: 100% 100%;
				width: 1.933rem;
				height: 1.933rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.my_top_zi {
				padding-left: 0.466rem;
			}
			
			.my_top_tx img {
				height: 1.53rem;
				width: 1.53rem;
				border-radius: 50%;
			}
			
			.my_login {
				width: 2.053rem;
				height: 0.533rem;
			}
			
			.my_login img {
				width: 100%;
				height: 100%;
			}
			
			.my_top_name h3 {
				color: #353535;
				line-height: 0.9rem;
				font-size: 0.459rem;
			}
			
			.my_top_nameh3 {
				display: flex;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.my_top_nameh3 img {
				height: 0.453rem;
				width: 0.453rem;
				margin-left: 0.4rem;
			}
			
			.my_lie {
				padding: 0.44rem 0.386rem;
				border-radius: 0.1rem;
			}
			
			.my_lie_li {
				display: flex;
				background: #fff;
				padding: 0.44rem 0.386rem;
				justify-content: space-between;
				line-height: 0.666rem;
				border-bottom: 1px solid #eeeeee;
			}
			
			.my_lie_li h4 {
				font-size: 0.373rem;
				line-height: 0.666rem;
				margin: 0;
			}
			
			.my_li_left {
				display: flex;
			}
			
			.my_li_left i {
				background: url(../images/my_02.png) no-repeat;
				background-size: 100% 100%;
				height: 0.666rem;
				width: 0.666rem;
			}
			
			.my_li_left2 i {
				background: url(../images/my_07.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.my_li_left3 i {
				background: url(../images/my_04.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.my_li_left4 i {
				background: url(../images/my_05.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.my_li_left5 i {
				background: url(../images/my_06.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.my_li_right {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.my_li_right i {
				background: url(../images/my_01.png) no-repeat;
				background-size: 100% 100%;
				height: 0.306rem;
				width: 0.186rem;
			}
			
			.my_li_right h4 {
				color: #888888;
				padding-right: 0.36rem;
			}
			
			.my_li_left h4 {
				padding-left: 0.36rem;
				color: #353535;
			}
			
			.my_content {
				background: #f6f6f6;
			}
			
			.my_li_right a {
				display: flex;
				align-items: center;
			}
			
			.my_order_name i {
				background: url(../images/my_01.png) no-repeat;
				background-size: 100% 100%;
				height: 0.306rem;
				width: 0.186rem;
			}
			
			.my_order_name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eeeeee;
				line-height: 0.866rem;
				padding: 0 0.4rem;
			}
			
			.my_order {
				background: #FFFFFF;
				margin: 0 0.4rem;
				margin-top: -1.3rem;
				box-shadow: 0 0.03rem 0.1rem #dadada;
				border-radius: 0.1rem;
			}
			
			.my_order_name h4 {
				font-size: 0.373rem;
				margin: 0;
				line-height: 0.866rem;
			}
			
			.my_order_ul {
				display: flex;
			}
			
			.my_order_ul li {
				width: 25%;
				text-align: center;
				display: flex;
				flex-direction: column;
				padding: 0.32rem 0;
				font-size: 0.293rem;
			}
			
			.my_order_ul li img {
				width: 0.666rem;
				height: 0.666rem;
				display: inline-block;
				margin: 0 auto;
			}
			
			.my_order_ul li span {
				line-height: 0.64rem;
			}
			
			.my_topshopz {
				padding: 0.666rem 0.493rem 0;
				display: flex;
				justify-content: space-between;
			}
			
			.my_topshopz_allleft {
				display: flex;
			}
			
			.wyshop_denglu {
				color: #fff;
				line-height: 0.9rem;
				padding: 0.1rem 0;
			}
		</style>
	</head>

	<body>

		<div id="app">
			<!--顶部-->
			<header class="mui-bar mui-bar-nav">
				<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
				<h1 class="mui-title">我的</h1>
			</header>
			<div class="my_content mui-content">
				<div class="my_top">
					<div class="my_topz my_topshopz">
						<div class="my_topshopz_allleft">
							<div class="my_top_tx">
								<img :src="user.head" />
							</div>
							<div class="my_top_zi">
								<div class="my_top_name">
									<div class="my_top_nameh3">
										<h3>{{user.nickname}}</h3><img src="../images/my_bianji.png"></div>
									<div class="my_login">
										<a href="#"><img src="../images/myshop_sq.png"></a>
									</div>
								</div>
							</div>
						</div>
						<div class="wyshop_denglu" v-if="user.uid > 1 ? false : true">登录 / 注册</div>
					</div>
				</div>
				<div class="my_order">
					<div class="my_order_name">
						<h4>我的订单</h4>
						<i></i>
					</div>
					<ul class="my_order_ul">
						<li onclick="go_page('order_list.html?status=1')">
							<img src="../images/myshop_01.png" />
							<span>待付款</span>
						</li>
						<li onclick="go_page('order_list.html?status=2')">
							<img src="../images/myshop_02.png" />
							<span>待发货</span>
						</li>
						<li onclick="go_page('order_list.html?status=3')">
							<img src="../images/myshop_03.png" />
							<span>待收货</span>
						</li>
						<li onclick="go_page('order_list.html?status=4')">
							<img src="../images/myshop_04.png" />
							<span>已完成</span>
						</li>
					</ul>
				</div>
				<div class="my_lie">
					<ul>
						<li class="my_lie_li" onclick="go_page('group_order_list.html?status=1')">
							<div class="my_li_left my_li_left2">
								<i></i>
								<h4>我的拼团</h4>
							</div>
							<div class="my_li_right">

								<i></i>

							</div>
						</li>
						<li class="my_lie_li" onclick="go_page('my_sc.html')">
							<div class="my_li_left my_li_left3">
								<i></i>
								<h4>我的收藏</h4>
							</div>
							<div class="my_li_right">

								<i></i>

							</div>
						</li>
						<li class="my_lie_li" onclick="go_page('address_list.html')">
							<div class="my_li_left my_li_left4">
								<i></i>
								<h4>我的地址</h4>
							</div>
							<div class="my_li_right">

								<i></i>

							</div>
						</li>
						<li class="my_lie_li" onclick="go_page('my_setup.html')">
							<div class="my_li_left my_li_left5">
								<i></i>
								<h4>设置</h4>
							</div>
							<div class="my_li_right">

								<i></i>

							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--底部菜单-->
			<style type="text/css">
				.mui-bar-tab .mui-tab-item.mui-active {
					color: #888888;
				}
				
				.bottom_nav_active span {
					color: #1c83fc !important;
				}
				
				#my_tab .mui-tab-label {
					color: #1c83fc !important;
				}
			</style>
			<nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc">
				<a class="mui-tab-item" id='home_tab' href="shop_home.html">
					<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item" id='class_tab' href="select_class.html">
					<span class="mui-icon">
		                <img src="../images/nav_03.png" width="19px;" alt="">
		            </span>
					<span class="mui-tab-label">分类</span>
				</a>
				<a class="mui-tab-item" id='shop_tab' href="mingpin.html">
					<span class="mui-icon">
		                <img src="../images/nav_05.png" width="19px;" alt="">
		            </span>
					<span class="mui-tab-label">名品商家</span>
				</a>
				<a class="mui-tab-item " id='car_tab' href="buyCar.html">
					<span class="mui-icon">
		                <img src="../images/nav_07.png" width="19px;" alt="">
		            </span>
					<span class="mui-tab-label" style="color: #888888;">购物车</span>
				</a>
				<a class="mui-tab-item bottom_nav_active" id='my_tab' href="myshop.html">
					<span class="mui-icon">
		                <img src="../images/nv_checked_09.png" width="19px;" alt="">
		            </span>
					<span class="mui-tab-label" style="color: #1c83fc;">我的</span>
				</a>
			</nav>
		
		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript"></script>
		<script src="../js/mui.min.js" type="text/javascript"></script>
		<script src="../js/host.config.js" type="text/javascript"></script>
		<script src="../js/js.js" type="text/javascript"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					user: 123, // 用户
					id: 1
				},
				methods: {

				},
				mounted: function() {
					var userInfo = localStorage.getItem("user");
					console.log(userInfo);
					if(userInfo) {
						let user = JSON.parse(userInfo);
						this.user = user;
						console.log(user);
					}
				}
			})

			mui.init();
			mui(document).on('tap', 'a', function() {
				let userInfo = host_config.localStorage.user;
				if(!userInfo) {
					mui.toast('请先登录', {
						duration: 'short',
						type: 'div'
					})
					setTimeout(function() {
						mui.openWindow('logn.html');
					}, 2000)
				} else {
					mui.openWindow(this.href, this.href);
				}
			})

			function go_page(url) {
				mui.openWindow(url, url)
			}

			mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {

				mui.openWindow(this.href, this.href)
			})
		</script>

	</body>

</html>